<template>
  <div>
    <!-- 按钮 -->
    <el-button type="primary" icon="el-icon-plus" style="margin: 10px 0px" @click="showDialog">添加</el-button>
    <!-- 
         表格组件 
         data:表格组件将来需要展示的数据------数组类型
         border：是给表格添加边框
         column属性
         label：显示标题
         width：对应列的宽度
         align：标题的对齐方式
         prop:对应列内容的字段名
         注意1：elmentUI当中的table组件，展示的数据是以一列一列进行展示数据
    -->
    <el-table style="width: 100%" border :data="list">
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column prop="name" label="题库名称" width="width">
      </el-table-column>
      <el-table-column prop="remark" label="题库备注" width="width">
      </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间" width="width">
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{ row, $index }">
          <el-tooltip class="item" effect="dark" content="更新" placement="top-start">
            <el-button type="primary" icon="el-icon-edit" circle @click="updateStore(row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteStore(row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="详情" placement="top-start">
            <el-button type="info" icon="el-icon-info" circle @click="detailStore(row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="回收站" placement="top-start">
            <el-button type="warning" icon="el-icon-delete-solid" circle @click="showQuestionRecycleBin(row)"></el-button>
          </el-tooltip> 
          <!-- <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateStore(row)">修改</el-button> -->
          <!-- <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteStore(row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加、修改的表单 -->
    <!--
      对话框
      :visible.sync:控制对话框显示与隐藏用的
      Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
    -->
    <el-dialog :title="tmForm.id ? '修改题库' : '添加题库'" :visible.sync="dialogFormVisible">
      <!-- form 表单 -->
      <el-form style="width=80%" :model="tmForm" :rules="rules" ref="ruleForm">
        <el-form-item label="题库名称" label-width="100px" prop="name">
          <el-input autocomplete="off" v-model="tmForm.name"></el-input>
        </el-form-item>
        <el-form-item label="题库备注" label-width="100px" prop="remark">
          <el-input type="textarea" placeholder="请输入内容"  maxlength="100"  show-word-limit  v-model="tmForm.remark">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateQuestionStore">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "personnal_question_store_management",
  data() {
    return {
      //列表展示数据
      list: [],
      //对话框显示与隐藏控制的属性
      dialogFormVisible: false,
      //收集题库信息
      tmForm: {
        id: "",
        name: "",
        remark: "",
      },
      storeDetails:'',
      //表单验证规则
      rules: {
        //题库名称验证规则
        name: [
          { required: true, message: "请输入题库名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur",},
        ],
      },
    };
  },
  //组件挂载完毕发请求
  mounted() {
    //获取列表数据方法
    this.getPageList();
  },
  methods: {
    //获取品牌列表的数据
    async getPageList() {
      //获取品牌列表的接口
      let result =
        await this.$API.personnal_question_store_management.reqStoreList();
      if (result.code == 20000) {
        this.list = result.data.personalQuestionStores;
      }
    },
    //点击添加按钮展示表单
    showDialog() {
      //显示对话框
      this.dialogFormVisible = true;
      //清空数据
      this.tmForm = { id: "", name: "", remark: "" };
    },
    //修改按钮展示表单
    updateStore(row) {
      this.dialogFormVisible = true;
      //将已有的题库信息赋值给表单
      this.tmForm = { ...row };
    },
    //删除功能
    deleteStore(row) {
      //弹框
      this.$confirm(`你确定删除${row.name}吗，归属该题库的试题也将一起被删除，可能此操作会有毁灭的后果`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(async() => {
        //当用户点击确定按钮时会触发
        //向服务器发送请求
        let result = await this.$API.personnal_question_store_management.reqDeleteStore(row.id);
        //如果删除成功
        if(result.code==20000){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //再次获取题库列表
          this.getPageList();
        }
        }).catch(() => {
        //当用户点击取消按钮时会触发
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
      });
    },
    //添加按钮（添加题库|修改题库）
    async addOrUpdateQuestionStore() {
      //当全部验证字段通过，再去书写业务逻辑
      this.$refs.ruleForm.validate(async (success) => {
        //如果全部字段符合条件
        if (success) {
          this.dialogFormVisible = false;
          //发请求（添加题库|修改题库）
          let result =
            await this.$API.personnal_question_store_management.reqAddOrUpdateStore(this.tmForm);
          if (result.code == 20000) {
            //弹出信息：添加题库信息、修改题库信息
            this.$message({
              type: "success",
              message: this.tmForm.id ? "修改题库成功" : "添加题库成功",
            });
            //添加或者修改完后，更新展示题库列表
            this.getPageList();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //展示
    async detailStore(row){
      //获取题库详情的接口
      let result = await this.$API.personnal_question_store_management.reqGetStoreTypeNumber(row.id);
      if (result.code == 20000) {
        let typeList = result.data.type;
        let str = "";
        for(var i=0;i<typeList.length;i++){
          str+=typeList[i].type+": "+typeList[i].number+" 道;";
        }
        this.$alert(str);
      }
    },
    //跳转到回收站
    showQuestionRecycleBin(row){
      // 内部界面转换为整张试卷所在的界面
      // 跳转到该试卷所在的界面
      this.$router.push({
        name:'QuestionRecycleBin',
        query:{
            store_info:JSON.stringify(row)
        },
      })
    },
  },
};
</script>

<style>
  .item {
      margin: 4px;
    }
</style>